<template>
  <el-container>
    <!--头部-->
    <el-header>
      <div>
        <span>精品资源</span>
        <!--标签-->
        <el-scrollbar style="width: 90%; ">
          <div style="display: flex;">
            <el-button :type="Abutton_color" @click="click_all()">全部</el-button>
            <el-button v-for="(item,key) in options" :key="key" @click="click_tag(item)" :type="item.btncolor">
              {{ item.tagName }}
            </el-button>
          </div>
        </el-scrollbar>

      </div>
    </el-header>
    <!---------------------------->
    <span style="font-size: 200%;margin-left:740px;">{{ one_tag }}</span>
    <hr>
    <!--展示内容-->
    <el-main>
      <div v-if="nowButton" style="margin-left: 100px;">
        <el-button type="text" v-for="item in switch_p" :style="{color:item.Buttoncolor}" @click="click_switchp(item)">
          {{ item.name }}
        </el-button>
      </div>
      <div style="display: flex;flex-wrap: wrap;">
        <el-card v-for="item in cardData" style="width: 240px;margin-left: 100px;margin-top: 100px;">
          <img referrer="no-referrer|origin|unsafe-url" referrerPolicy="no-referrer" :src="item.img" width="200px"/>
          <a referrer="no-referrer|origin|unsafe-url" referrerPolicy="no-referrer" :href="item.url" style="color: blue;"
             target="_blank"
          >前往学习~~~~~</a>
          <br>
          {{ item.name }}
        </el-card>
      </div>
    </el-main>
    <!---------------------------->
    <!--尾部-->
    <el-footer>
      <div class="block">
        <!--必须加上.sync才能双向绑定!!!!!!-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page.sync="currentPage"
            :total="count"
        >
        </el-pagination>
      </div>
    </el-footer>
    <el-backtop target=".block"></el-backtop>
  </el-container>

</template>

<script>
import axios from 'axios'

export default {

  created() {
    this.get_tags()
    this.click_switchp(this.nowButton)
  },
  data() {
    return {

      cardData: [],//存储所有数据
      options: [],//存储所有标签
      one_tag: '全部',//存储点击的标签(默认全部课程)
      switch_p: [//存储以下name
        { name: '全部' }
      ],
      nowButton: {//用的now,其实表示历史点击的是全部or正在审核or已经审核
        name: '全部'
      },
      count: 10,//默认总的页数为
      pagenum: '1',//当前页数 默认页数为1
      pagesum: '10',//每页展示数量，默认为10
      currentPage: 1,
      Abutton_color: 'primary'

    }
  },
  methods: {
    get_tags() {//获取所有标签
      axios.get('http://localhost:9090/get_tags').then(res => {
        //console.log(res.data)
        this.options = res.data
        //console.log(this.options)
      })
    },
    click_all() {//点击了标签页里的全部
      this.handchangecolor()
      this.one_tag = '全部'
      this.Abutton_color = 'success'

      this.get_resource_Bypage()
      this.currentPage = 1

    },
    click_tag(item) {//点击某一个标签
      this.handchangecolor()
      item.btncolor = 'success'
      this.one_tag = item.tagName//标签名
      this.currentPage = 1//将点亮的页数设为第一页
      this.pagenum = 1//将页数设为第一页
      this.get_resource_Bypage()

    },
    handleSizeChange(val) {
      // console.log("一页展示数量")

      this.pagesum = val
      this.get_resource_Bypage()
    },
    handleCurrentChange(val) {
      //console.log("当前页");

      this.pagenum = val
      this.get_resource_Bypage()

    },

    click_switchp(item) {//点击的是当前标签下的全部or正在审核or已经审核

      this.nowButton.Buttoncolor = 'black'//点击当前按钮前，把历史按钮颜色改为黑色
      item.Buttoncolor = 'green'//当前按钮颜色设为绿色

      this.nowButton = item
      if (item.name == '全部') {
        axios.get('http://localhost:9090/get_resource_count').then(res => {
          //console.log("总数量:")
          //console.log(res.data)
          this.count = res.data

        })
        //异步请求
        this.get_resource_Bypage()
      }

    },

    get_resource_Bypage() {//共用方法，获取标签对应的数据

      axios.put('http://localhost:9090/get_resource', {
        pagenum: this.pagenum,
        pagesum: this.pagesum,
        tag_name: this.one_tag
      }).then(res => {
        this.cardData = res.data

      })
      axios.put('http://localhost:9090/get_resource_count_Bytagname', {
        tag_name: this.one_tag
      }).then(res => {
        this.count = res.data

      })
    },

    handchangecolor() {//对标签按钮渲染
      for (let i in this.options) {//每次点击标签对其进行渲染
        this.options[i].btncolor = 'primary'
        this.Abutton_color = 'primary'
      }
    }

  }
}

</script>

<style>

.scrollbar-flex-content {
  height: 100%;

  display: flex;


}


</style>
